﻿
/*
Base Universal Style
*/


body
{
    font-family: Arial, Sans-Serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

div
{
    margin: 0 auto;
    display: block;
    text-align: left;
    vertical-align: top;
}

header, footer, nav, section
{
    display: block;
}

a:link, a:visited, a:active
{
    color: inherit;
}


/*
Generic Form Elements
*/

input
{
    position: relative;
}

input, textarea.textbox
{
    border: 1px solid black;
    padding: 2px;
    width: 200px;
}

input[type=checkbox]
{
    width:10px;
}

input.short
{
    width: 90px;
}

div.Checklist
{
    width:300px;
}

textarea.textbox
{
    height: 10em;
}

span.Seperator
{
    font-size: 18pt;
    font-weight: bold;
    content: "|";
}

select
{
    width: 200px;
    font-weight: bold;
    border: 1px solid black;
}



/*
Header Style
*/

.Header
{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
.Header div
{
    vertical-align: middle;
    display: inline;
}
/*
Sidebar Styles
*/

div#sidebar
{
    width: 200px;
    padding: 0 10px 0 10px;
    float: left;
    position: fixed;
    top: 130px;
}

div#sidebar.fixed
{
    position: fixed;
    top: 130px;
}

div#sidebar ul
{
    margin-left: 0px;
    padding: 0px;
}

div#sidebar li
{
    width: 100%;
    display: inline-block;
    background-color: White;
    height: 20px;
    color: Black;
    font-weight: bolder;
    font-size: 13pt;
    margin-left: 0;
    padding: 5px;
    position: relative;
    z-index: 5;
}


div#sidebar #dvSelector
{
    display: inline;
    position: relative;
    z-index: 0;
    right: -10px;
    top: 5px;
    border-bottom: 2px solid transparent;
    border-left: 2px solid #3ABC47;
    border-top: 2px solid transparent;
    height: 0;
    width: 10;
}


div#sidebar .Selected
{
    background-color: Black;
    color: White;
    padding: 5px;
    margin: 0px;
    border: 1px solid black;
}

div#sidebar .Selected:after
{
    height: 0;
    width: 10px;
    content: " >";
}

div#sidebar li a
{
    text-decoration: none;
}

div#sidebar #Submit, .Submit
{
    width: auto;
    height: 40px;
    border: 1px solid black;
    background-color: White;
    font-weight: bolder;
    padding:0 10px;
    cursor:pointer;
    text-transform:uppercase;
    font-size: 20pt;
    font-weight:normal !important;
    text-decoration:none;
}

hr.Submit
{
    border-bottom: 1px black;
    width:100%;
    height:0px;
    border-style: solid;
}


/*
Content Styles
*/

div.Content
{
    width: 640px;
    float: right;
}

div.Content div
{
    width: 100%;
}

div.Content .Section .Header, #login .Header
{
    width: 100%;
    border-bottom: 2px solid black;
    font-size: 24pt;
    font-weight: bold;
    padding-top: .5em;
}

div.Content .Section:first-child .Header
{
    padding-top: 0px;
}

div.Content .Section .Field, #login .Field
{
    position: relative;
    display: inline-block;
    margin-top: 5px;
    padding: 5px;
}

div.Content .Section .Field > div, #login .Field > div
{
    display: inline;
}

div.Content .Section .Field .Label, #login .Field .Label
{
    font-weight: bold;
    font-size: 1.4em;
    width: 200px;
    vertical-align: top;
    display: inline-block;
}

.Field div.Input
{
    vertical-align: middle;
}

.Field input.date
{
    width: 200px;
}

/*
Tag-specific style
*/

div#main
{
    width: 900px;
    margin-top: 10px;
}

div#login
{
    margin:0 auto;
    margin-top: 100px;
    width:300px;
}

div.Main div
{
    display: inline-block;
}


div.PageTitle
{
    width: 100%;
    padding-top: 10px;
    font-weight: bold;
    font-size: 28pt;
}

hr#pageSeperator
{
    width: 100%;
    border: 2px solid black;
    margin-bottom: 10px;
}

input.Hour, input.Minute, input.BP
{
    width: 3em;
}

/*
Account Bar Control
*/
#accountBar, #accountBar div
{
    display: inline-block;
}

#accountBar
{
    width: auto;
    display: inline;
    white-space: nowrap;
    vertical-align: middle;
    padding-top: 20px;
}

#accountBar div
{
    margin: 0px;
    padding-left: 4px;
    padding-top: 4px;
    vertical-align: middle;
    text-align: center;
    border-left: 2px solid black;
}

#accountBar div:first-child
{
    border-left: none;
}

#accountBar div#nameContainer
{
    padding-top: 3px;
    font-weight: bold;
    width: auto;
    vertical-align: middle;
}


/*
Selectables
*/



ul.select li, .selectable
{
    display: inline-table;
    padding: 0px;
    margin: 0px;
    cursor:pointer;
}

ul.select .ui-selecting
{
    background: #FECA40;
}

ul.select .ui-selected, .selectable.ui-selected
{
    background: black;
    color: white;
}

ul.select li, .selectable
{
    text-transform:capitalize;
    padding:4px;
    margin:4px;
    font-size: 1.4em;
}

ul.select li:hover
{
    cursor:pointer;
    background-color:#FECA40;
}


.focused{  
        border:solid 2px #73A6FF !important;  
        background:#EFF5FF;  
        color:#000;  
}  

td.selectable
{
    margin:3px;
}


#Submit.Submit:hover
{
    background-color:#3ABC47;
}

#Edit.Submit:hover
{
    background-color:yellow;
}

#Back.Submit:hover
{
    background-color:#C45656;
    color:White;
    
}

#Back.Submit
{
    width:100% ;
}


.MenuItem
{
    padding:5px;
    margin:15px;
    font-size:1.2em;
    font-weight:bold;   
    cursor:pointer;
    display:inline-block;
    
}

.MenuItem
{
    border-left:2px solid black;
}

.MenuItemfirst-child
{
    border-left:0px solid white;
}

.MenuItem a
{
    text-decoration:none;
}

.MenuItem#Users:hover
{
    color:White;
    background-color:#C45656;
}

.MenuItem#Forms:hover
{
    color:White;
    background-color:#66C9FF;
}
.MenuItem#Reports:hover
{
    color:White;
    background-color:#3ABC47;
}

   .ListItem
    {
        width: 100%;
        font-size: 1.2em;
        padding: 3px;
        background-color: #ddd;
        border: 2px solid black;
        margin: 4px;
        cursor: pointer;
        display: inline-block;
    }
    
    .ListItem .left
    {
        width: auto;
        float: left;
    }
    
    .ListItem .right
    {
        width: auto;
        float: right;
    }
    
    .ListItem:hover
    {
        background-color: #aaa;
    }
    
    .Submit:hover
    {
        background-color:#5BFCFF;
    }
    
    .Submit.Small, .Link
    {
        padding:0px;
        font-size:.8em;
        border:none;
        border-bottom:2px solid;
    }
    
    .Reports .Link 
    {
        border-color:#3ABC47;
    }